<template>
  <div :class="['subPage']">
    <div>
        <nav-bar 
        :title="navTitle" 
        position="center" 
        color='linear-gradient(90deg,rgba(85,125,245,1) 0%,rgba(63,74,222,1) 100%)' 
        :rowColor="'white'" 
        :goBack="goBack" 
        :isMsg='false' 
        fontColor='#fff' ></nav-bar>
    </div>
    <div class="mainContent" v-if="typeList.length!==0">
        <div class="typeCard" :style="{'background':'linear-gradient(143deg, ' + item.color_start  + ' 0%,' +  item.color_end  + ' 100%);'}" 
         v-for="item in typeList" :key="item.dept_id" @click="goBooking(item)">
            <img :src="item.dept_img_url" alt="">
            {{item.dept_name}}
        </div>
    </div>
    <div class="mainContent" v-else >
        <div class="noDataImg">
          <img class="noneAddress" :src="noDataImg"/>
          <span>暂无相关数据</span>
        </div>
    </div>
    <!-- 门诊重症弹窗  -->
    <div class="modalClass" v-if="theBook">
      <div class="modalBox">
        <div class="modalTit">
          <img :src="severeBanner" alt="" />
        </div>
        <div class="modalCenter">
          <div class="dataBox" >
            <span class="itemSpan">门诊重症主要为指定的23种重症疾病患者提供续方服务，如需调整治疗方案需要线下医院就医，为确保医生准确开药，请仔细阅读以下须知：</span>
            <span class="itemSpan">1. 就诊人需为武汉市门诊重症患者，并确认重症疾病在23种重症疾病范围内，否则因虚假信息造成的一切后果将由就诊人承担；</span>
            <span class="itemSpan">2.就诊时段：</span>
            <span class="itemSpan">上午9:00-11:00;</span>
            <span class="itemSpan">下午15:00-17:00;</span>
            <span class="itemSpan">夜间 18:00—21:00；</span>
            <span class="itemSpan">3.预约时需在病情描述界面填写药品名称、规格及数量，并上传您的既往病历、处方笺、检验检查结果等相关资料，以便医生准确开具处方；</span>
            <span class="itemSpan">4.每次处方最多可开具10种药品，且单种药品用量最多不超过1个月，针剂、毒麻精、草药及其他风险药品不予开具；</span>
            <span class="itemSpan">5.处方订单在“我的—诊疗订单”查询，需先填写配送收货地址，后有指定工作人员与您联系并核对信息，确认无误后将在24小时内由第三方快递配送快递费需自付，线上开具药品一经售出不予退换。</span>
          </div>
        </div>
        <div class="btnBomBlue">
            <div class="modalFooterBtn leftBtn" @click="theBook=false">
              不同意
            </div>
            <div class="modalFooterBtn rightBtn" @click="goNext(1)">
              同意
            </div>
        </div>

      </div>
    </div>
    <!-- 专科开药弹窗  -->
    <div class="modalClass" v-if="showModal">
      <div class="modalBox">
        <div class="modalTit">
          <img :src="medicalBanner" alt="" />
        </div>
        <div class="modalCenter">
          <!-- <div class="dataBox">
            <span class="itemSpan">门诊重症知情同意书</span>
          </div> -->
          <div class="dataBox" >
            <span class="itemSpan">专科开药主要是为常见病、慢性病的复诊患者提供续方服务，为确保医生准确开药，请仔细阅读以下须知：</span>
            <span class="itemSpan">1. 就诊人为诊断明确且病情稳定的复诊患者，请确认就诊患者信息，并如实反馈病情，否则一切后果将由就诊人承担；</span>
            <span class="itemSpan">2. 复诊时间超过三个月的患者、首诊患者、急症、危重症患者，请到线下医院就诊；</span>
            <span class="itemSpan">3. 开药时段：</span>
            <span class="itemSpan">上午9:00-11:00；</span>
            <span class="itemSpan">下午15:00-17:00；</span>
            <span class="itemSpan">夜间 18:00—21:00；</span>
            <span class="itemSpan">4. 如您为三个月内的复诊患者，请在病情描述界面填写药品名称、规格、数量及用法，并上传您的既往病历、处方笺、检验检查结果等相关资料，以便医生准确开具处方；</span>
            <span class="itemSpan">5. 每次处方最多可开具10种药品，且用药剂量最多不超过1个月，针剂、毒麻精、草药及其他风险药品不予开具；</span>
            <span class="itemSpan">6.处方订单开具后可选择配送（填写收货地址）或到院自取（武汉大学人民医院首义院区门诊药房7号窗口）并完成线上支付；</span>
            <span class="itemSpan">如选择配送，订单将在支付成功后24小时内由第三方快递配送，快递费到付；药品一经售出不予退换。</span>
          </div>
        </div>
        <div class="btnBomBlue">
            <div class="modalFooterBtn leftBtn" @click="showModal=false">
              不同意
            </div>
            <div class="modalFooterBtn rightBtn" @click="goNext(2)">
              同意
            </div>
        </div>

      </div>
    </div>
    <i-toast id="toast" /> 
  </div>
</template>
<script>
  let app = getApp()
  import api from '@/api/api'
  import navBar from '@/components/navBar'
  const {
    $Toast,
    $Message
  } = require('../../../../../../static/iview/base/index')
  import * as types from '@/store/types'
  import { mapState } from 'vuex'
  import nim from '@/utils/nim'
  export default {
    computed: {
      ...mapState([
        'ifIphonex', 'talkInfo'
      ])
    },
    components: {
      navBar
    },
    data() {
      return {
        navTitle: '开药专区',
        typeList: [],
        theBook: false,
        showModal: false,
        nowItem: {},
        medicalBanner: 'https://ks3-cn-beijing.ksyun.com/wxapp/wdrm/image/patient/medical_banner.png',
        severeBanner: 'https://ks3-cn-beijing.ksyun.com/wxapp/wdrm/image/patient/severe_case_banner.png',
        noDataImg: ''
      }
    },
    onShow () {
      this.navTitle = '开药专区';
      this.noDataImg = require("../../../../../../static/images/noneAddress.png");
    },
    onLoad (options) {
      Object.assign(this.$data, this.$options.data())
      this.getTypeList()
    },
    onUnload() {
    },
    methods: {
      // 路由反馈函数
      goBack () {
        this.$router.go(-1)
      },
      // 跳转预约 或者 科室页面
      goBooking (item) {
        this.nowItem = item
        if (item.skip == 1) {
          var token = this.$storage.getToken();
          if(!token) {
            this.$utils.showToast("text", "请先登录");
            setTimeout(() => {
              this.$router.push("/pages/center/child/login/main");
            }, 300);
            return
          }
          this.theBook = true
        } else {
          this.showModal = true
        }
      },
      goNext(code) {
        if(code == 1) {
            this.$api.prescriptDeptLit({ parent_id: this.nowItem.dept_id }, { showLoading: true }).then(res=>{
              this.theBook = false
              this.$router.push(`/pages/subPage/register/prescriptArea/bookingOrder/main?data=${JSON.stringify(res.data[0])}`)
          })
        } else {
          this.showModal = false
          this.$router.push(`/pages/subPage/register/prescriptArea/deptPage/main?data=${JSON.stringify(this.nowItem)}`)
        }
      },
       // 获取选择 种类
      getTypeList () {
        this.$api.prescriptDeptLit({ parent_id: '' }, { showLoading: true }).then(res=>{
          this.typeList = res.data
          console.log(this.typeList)
        })
      }
    }
  }
</script>
<style scoped lang='less'>
  .subPage {
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
  }
  .mainContent {
    flex: 1;
    overflow-x: hidden;
    position: relative;
    padding: 0 36rpx;
    .typeCard {
        position: relative;
        margin: 32rpx auto;
        margin-bottom: 0rpx;
        width: 100%;
        height: 280rpx;
        border-radius: 11rpx;
        color: 40rpx;
        box-sizing: border-box;
        padding-left: 30.3%;
        color: #fff;
        font-size: 40rpx;
        line-height: 280rpx;
        font-weight: bold;
        img {
            position: absolute;
            left: 11.5%;
            top: 50%;
            transform: translateY(-50%);
            height: 89rpx;
            width: 91rpx;
        }
    }
  }
  .modalClass {
    position: absolute;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    background: rgba(0, 0, 0, 0.6);
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    height: 100%;
    z-index: 9;
    // background:rgba(0,0,0,1);
    // opacity:0.6;
    .modalBox {
      position: relative;
      // width: 670rpx;
      height: 920rpx;
      z-index: 99;
      background: #ffffff;
      border-radius: 12px;
      margin: 0 65rpx;
      .dialog_close {
        width: 60rpx;
        height: 60rpx;
        position: absolute;
        top: -30rpx;
        right: -30rpx;
      }
      .modalTit {
        width: 100%;
        img {
          width: 100%;
          height: 220rpx;
        }
      }
      .modalCenter {
        padding: 27rpx 35rpx 13rpx 35rpx;
        display: flex;
        flex-direction: column;
        height: 55%;
        overflow-y: scroll;
        &::-webkit-scrollbar-track-piece {
          background-color: rgba(0, 0, 0, 0);
          border-left: 1px solid rgba(0, 0, 0, 0);
        }
        &::-webkit-scrollbar {
          width: 8rpx;
          height: 13rpx;
          -webkit-border-radius: 5rpx;
          -moz-border-radius: 5rpx;
          border-radius: 5rpx;
        }
        &::-webkit-scrollbar-thumb {
          background-color: #bbbbbb;
          background-clip: padding-box;
          -webkit-border-radius: 5rpx;
          -moz-border-radius: 5rpx;
          border-radius: 5rpx;
          min-height: 28px;
        }
        &::-webkit-scrollbar-thumb:hover {
          background-color: rgba(0, 0, 0, 0.5);
          -webkit-border-radius: 5rpx;
          -moz-border-radius: 5rpx;
          border-radius: 5rpx;
        }
        .dataBox {
          margin-bottom: 20rpx;
          span {
            display: inline-block;
            font-size: 30rpx;
            font-weight: 400;
            color: rgba(102, 102, 102, 1);
            vertical-align: top;
          }
          .itemPie {
            width: 12rpx;
            height: 12rpx;
            background: rgba(74, 100, 234, 1);
            border-radius: 50%;
            margin-right: 15rpx;
            margin-top: 13rpx;
            // vertical-align: middle;
            // margin-bottom: 5rpx;
          }
          .itemSpan {
            width: 100%;
            margin: 10rpx 0;
          }
          .itemColor {
            color: #fb4141;
          }
          .itemSpan2 {
            font-weight: bold;
          }
        }
      }
      .btnBomBlue{
        display: flex;
        justify-content: space-between;
        padding: 32rpx 37rpx;
        .modalFooterBtn{
          text-align: center;
          font-size:36rpx;
          font-weight:400;
          padding: 17rpx 0rpx;
          width: 257rpx;
          border-radius:4rpx;
        }
        .leftBtn{
          color: #4A71E8;
          background:rgba(255,255,255,1);
          border: 1rpx solid rgba(160,183,237,1);
        }
        .rightBtn{
          color:#FFFFFF;
          background:linear-gradient(90deg,rgba(85,125,245,1) 0%,rgba(63,74,222,1) 100%);
          margin-left: 25rpx;
        }
      }
      .modalFooter {
        position: relative;
        top: 40rpx;
        // width:544rpx;
        height: 76rpx;
        background: rgba(74, 100, 234, 1);
        border-radius: 38rpx;
        font-size: 28rpx;
        font-weight: 600;
        color: rgba(255, 255, 255, 1);
        margin: 0 37rpx 63rpx 37rpx;
        line-height: 76rpx;
        text-align: center;
      }
      .btnDis {
        background: #c5c8ce;
      }
    }
  }
  .noDataImg {
    flex: 1;
    position: relative;
    .noneAddress {
      height: 720rpx;
      width: 720rpx;
      left: 42%;
      top: 37%;
    }
    span {
      position: absolute;
      font-size: 32rpx;
      color: #CCCCCC;
      top: 58%;
      left: 35%;
    }
  }
</style>
